<template>
  <rx-layout>
    <div slot="center" style>
      <rx-fit>
        <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
          <div class="table-operator">
            <rx-button alias="formUserMappingAdd" :butn-icon="'plus'" :butn-type="'primary'" :show-no-right="true" @click="add">
                {{$ti18('rxList.newBtn',"新建")}}
            </rx-button>


          </div>

        </div>

        <rx-grid
                ref="table"
                :allowRowSelect="false"
                :multiSelect="true"
                :columns="columns"
                :defaultPageSize="10"
                url="/api-form/form/core/formUserMapping/query"
                :queryParam="queryParam"
                data-field="result.data"
                :pageSizeOptions="['10','30','40']"
                id-field="id"
                @selectChange="onSelectChange"
        >
             <span slot="status" slot-scope="{ text, record }">
                 <a-tag :color="statusMap[text].color">
                    <span>{{ statusMap[text].text }}</span>
                 </a-tag>
             </span>
             <span slot="action" slot-scope="{ text, record }" class="actionIcons">
                <span @click="edit(record)">
                    {{$ti18('rxList.editBtn',"编辑")}}
                </span>
                <span  @click.stop="removeById(record.id)">
                    {{$ti18('rxList.delBtn','删除')}}
                </span>
            </span>
        </rx-grid>
      </rx-fit>
    </div>
  </rx-layout>
</template>

<script>
  import FormUserMappingApi from '@/api/form/core/formUserMapping'
  import FormUserMappingEdit from './FormUserMappingEdit'
  import {BaseList,RxFit} from '@lowcode/jpaas-common-lib';
  export default {
    name: 'FormUserMappingList',
    mixins: [BaseList],
    components: {
      RxFit
    },
    created(){
        this.needFilterAppId();
    },
    data() {
      return {
        columns: [
          {
            title: this.$ti18('rxList.index','序号'),
            type: 'indexColumn',
            width: 100,
            dataIndex: 'serial',
            scopedSlots: {customRender: 'serial'}
          },
          {title: this.i18n('list.formName','表单名') , dataIndex: 'formName', width: 100},
          {title: this.i18n('list.tableName','表名'), dataIndex: 'tableName', width: 100},
          {title: this.i18n('list.appAlias','应用别名'), dataIndex: 'appAlias', width: 100},
          {title: this.i18n('list.status','状态'), dataIndex: 'status', width: 100,scopedSlots: {customRender: 'status'}},
          {title: this.i18n('list.createTime','创建时间'), dataIndex: 'createTime', width: 100},
          {title: this.i18n('list.action','操作'), width: 100, dataIndex: 'action', scopedSlots: {customRender: 'action'}}
        ],
        component:FormUserMappingEdit,
        comment: this.i18n('list.title','外部表用户映射配置') ,
        statusMap: {
              1: {color: 'green', text: this.i18n('list.enable',"启用")},
              0: {color: 'red', text: this.i18n('list.disable',"禁用") },
        },
      }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"formUserMapping",key);
        },
        removeById(id){
            let self_ = this;
            this.$confirm({
                title: this.$ti18('rxMsa.actionTips','操作提示'),
                zIndex: 20000,
                content: this.i18n('list.delTip','提示信息'),
                okText: this.$ti18('rxForm.okBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                onOk() {
                    FormUserMappingApi.del({ids:id}).then(res => {
                        if (res.success && res.code == 200) {
                            self_.refreshGrid()
                        }
                    })
                },
                onCancel() {
                }
            })
        }
    }
  }
</script>
<style scoped>
  .table-operator {
    padding:4px;
  }
  .table-operator button {
    margin:2px;
  }
</style>

